<template>
  <div :key="id">
    <ButtonGroup
      :title="`${configKey === 'titleWeight' ? '标题' : '描述'}加粗`"
      :status="status[currentStatus]"
    >
      <el-button-group>
        <el-button :class="{ select: currentStatus === 0 }" @click="changeWeight(0)">
          <font-awesome-icon icon="bold" />
        </el-button>
        <el-button :class="{ select: currentStatus === 1 }" @click="changeWeight(1)">
          <svg
            t="1735624270755"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7903"
            width="14"
            height="14"
            fill="currentcolor"
          >
            <path
              d="M610.986667 464.213333c75.093333-40.96 122.88-119.466667 122.88-208.213333 0-133.12-105.813333-238.933333-238.933334-238.933333H204.8c-10.24 0-17.066667 6.826667-17.066667 17.066666s6.826667 17.066667 17.066667 17.066667h85.333333v921.6H204.8c-10.24 0-17.066667 6.826667-17.066667 17.066667s6.826667 17.066667 17.066667 17.066666h358.4c150.186667 0 273.066667-122.88 273.066667-273.066666 0-133.12-98.986667-245.76-225.28-269.653334zM494.933333 51.2c112.64 0 204.8 92.16 204.8 204.8s-92.16 204.8-204.8 204.8h-170.666666v-409.6h170.666666z m68.266667 921.6h-238.933333v-477.866667h238.933333c133.12 0 238.933333 105.813333 238.933333 238.933334s-105.813333 238.933333-238.933333 238.933333z"
              p-id="7904"
            ></path>
          </svg>
        </el-button>
      </el-button-group>
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import ButtonGroup from './ButtonGroup/index.vue';
import type { UpdateStatus, VueComType } from '@/types';

const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const updateStatus = inject<UpdateStatus>('updateStatus');

function changeWeight(pos: number) {
  if (updateStatus) updateStatus(props.configKey, pos);
}
</script>

<style scoped></style>
